<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <script src="../js/base.min.js"></script>
    <title>扑克牌</title>
    <link rel="stylesheet" href="../css/poker.css"/>
</head>
<body>

<ul>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>A</p>
            <p>♠</p>
        </section>
        <section></section>
        <section flex="cross:center">
            <p>♠</p>
        </section>
        <section></section>
        <section class="b" flex="dir:top main:right cross:center" >
            <p>♠</p>
            <p>A</p>
        </section>

    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>2</p>
            <p>♠</p>
        </section>
        <section></section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section></section>
        <section class="b" flex="dir:top main:right cross:center" >
            <p>♠</p>
            <p>2</p>
        </section>

    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>3</p>
            <p>♠</p>
        </section>
        <section></section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section></section>
        <section class="b" flex="dir:top main:right cross:center" >
            <p>♠</p>
            <p>3</p>
        </section>
    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>4</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section></section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section  class="b" flex="dir:top main:right cross:center" >
            <p>♠</p>
            <p>4</p>
        </section>
    </li>
    <li flex="main:justify">
        <section  class="a" flex="dir:top cross:center">
            <p>5</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section  flex="cross:center">
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="b" flex="dir:top main:right cross:center"  >
            <p>♠</p>
            <p>5</p>
        </section>
    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>6</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section></section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section  class="b" flex="dir:top main:right cross:center"  >
            <p>♠</p>
            <p>6</p>
        </section>
    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>7</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section  class="short" flex="cross:center">
            <p>♠</p>
        </section>
        <section  class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section  class="b" flex="dir:top main:right cross:center">
            <p>♠</p>
            <p>7</p>

        </section>
    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>8</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="zhong8" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="b" flex="dir:top main:right cross:center">
            <p>♠</p>
            <p>8</p>
        </section>
    </li>
    <li flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>9</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section flex="cross:center">
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="b" flex="dir:top main:right cross:center">
            <p>♠</p>
            <p>9</p>
        </section>
    </li>
    <li  flex="main:justify">
        <section class="a" flex="dir:top cross:center">
            <p>10</p>
            <p>♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="zhong10" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="zhong2" flex="dir:top cross:center main:justify">
            <p>♠</p>
            <p>♠</p>
            <p class="fanzhuan">♠</p>
            <p class="fanzhuan">♠</p>
        </section>
        <section class="b" flex="dir:top main:right cross:center">
            <p>♠</p>
            <p>9</p>
        </section>
    </li>
</ul>

</body>
</html>